<template>
  <div class="FlowCard-container">
    <template v-if="nodeConfig.type === 0">
      <div class="commonBtn-primary" @click="goHandle">发起流程</div>
    </template>
    <template v-if="nodeConfig.type === 1">
      <div class="card pointer" @click="goHandle">
        <div class="title c-fff" style="background-color: orange">
          {{ nodeConfig.nodeName }}
          <div class="close" @click.stop="deleteTarget">
            <component
              class="c-fff fs-14 pointer"
              is="close-outlined"
            ></component>
          </div>
        </div>
        <div class="content flex-row-xbetween-ycenter">
          <a-tooltip>
            <template #title>
              {{ showText }}
            </template>
            <div class="content-main line2-ellipsis">
              {{ showText }}
            </div>
          </a-tooltip>
          <component class="fs-18 c-999" is="right-outlined"></component>
        </div>
      </div>
    </template>
    <template v-if="nodeConfig.type === 2">
      <div class="card pointer" @click="goHandle">
        <div class="title c-fff" style="background-color: #2dc26b">
          {{ nodeConfig.nodeName }}
          <div class="close" @click.stop="deleteTarget">
            <component
              class="c-fff fs-14 pointer"
              is="close-outlined"
            ></component>
          </div>
        </div>
        <div class="content flex-row-xbetween-ycenter">
          <a-tooltip>
            <template #title>
              {{ showText }}
            </template>
            <div class="content-main line2-ellipsis">
              {{ showText }}
            </div>
          </a-tooltip>
          <component class="fs-18 c-999" is="right-outlined"></component>
        </div>
      </div>
    </template>
    <template v-if="nodeConfig.type === 4">
      <div class="condition">
        <div
          class="pointer btn-addCondition commonBtn-primary"
          @click="addCondition"
        >
          添加条件
        </div>
        <div
          class="condition-item"
          v-for="(item, index) in nodeConfig.conditionNodes"
          :key="index"
        >
          <div class="condition-card pointer">
            <div class="card" @click="goHandle(item)">
              <div class="title bg-fff">
                {{ item.nodeName }}
                <div class="close" @click.stop="deleteTarget(index)">
                  <component
                    class="c-999 fs-14 pointer"
                    is="close-outlined"
                  ></component>
                </div>
              </div>
              <div class="content">{{ showTextCondition(item) }}</div>
            </div>
            <FlowAdd v-model:node="nodeConfig.conditionNodes[index]"></FlowAdd>
          </div>
          <FlowNode
            v-if="item.childNode.nodeName"
            v-model:node="nodeConfig.conditionNodes[index].childNode"
          ></FlowNode>
          <template v-if="index === 0">
            <div class="top-left-cover-line"></div>
            <div class="bottom-left-cover-line"></div>
          </template>
          <template v-if="index === nodeConfig.conditionNodes.length - 1">
            <div class="top-right-cover-line"></div>
            <div class="bottom-right-cover-line"></div>
          </template>
        </div>
      </div>
    </template>

    <a-drawer width="50%" v-model:open="showModal" :title="handleTitle">
      <a-form layout="vertical" ref="formRef" :model="form">
        <a-tabs centered v-model:activeKey="tabsKey">
          <a-tab-pane v-if="nodeConfig.type !== 0" :key="1" :tab="tabsTitle">
            <div v-if="nodeConfig.type === 1">
              <a-form-item label="节点名称：">
                <a-input
                  v-model:value="nodeConfig.nodeName"
                  placeholder="请填写节点名称"
                ></a-input>
              </a-form-item>
              <a-form-item label="指定方式：">
                <a-radio-group v-model:value="nodeConfig.settype">
                  <a-radio :value="1">指定成员</a-radio>
                  <a-radio :value="2">上级主管</a-radio>
                  <a-radio :value="4">发起人自选</a-radio>
                  <a-radio :value="9">指定角色</a-radio>
                  <a-radio :value="10">来自流程</a-radio>
                </a-radio-group>
                <div
                  class="mt-10"
                  style="
                    border: 1px solid orange;
                    padding: 10px;
                    border-radius: 4px;
                  "
                >
                  <div v-if="nodeConfig.settype === 1">
                    <div class="commonBtn-primary" @click="addOrChangeUser(2)">
                      添加/修改成员
                    </div>
                    <div v-if="showText !== '请选择'" class="mt-10">
                      {{ showText }}
                    </div>
                  </div>
                  <div v-if="nodeConfig.settype === 2">
                    <div class="flex-row-ycenter">
                      <div>由流程上的</div>
                      <div class="ml-10 mr-10">
                        <a-select
                          v-model:value="nodeConfig.selectBill"
                          style="width: 100px"
                        >
                          <a-select-option value="createuser"
                            >填单人</a-select-option
                          >
                          <a-select-option value="applyuser"
                            >申请人</a-select-option
                          >
                        </a-select>
                      </div>
                      <div>的主管进行审批。</div>
                      <div>（找不到主管时，由上级主管代审批）</div>
                    </div>
                    <div class="flex-row-ycenter mt-10">
                      <div>审批人为空时是否转交给系统管理员：</div>
                      <div>
                        <a-radio-group
                          v-model:value="nodeConfig.noHanderAction"
                        >
                          <a-radio :value="1">是</a-radio>
                          <a-radio :value="0">否</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                  </div>
                  <div v-if="nodeConfig.settype === 4">
                    <div class="flex-row-ycenter mt-10">
                      <div>选择范围：</div>
                      <div>
                        <a-radio-group v-model:value="nodeConfig.selectRange">
                          <a-radio :value="1">全公司</a-radio>
                          <a-radio :value="2">指定成员</a-radio>
                          <a-radio :value="3">指定角色</a-radio>
                        </a-radio-group>
                      </div>
                    </div>
                    <div class="mt-10" v-if="nodeConfig.selectRange === 2">
                      <div
                        class="commonBtn-primary"
                        @click="addOrChangeUser(2)"
                      >
                        添加/修改成员
                      </div>
                      <div v-if="showText !== '请选择'" class="mt-10">
                        {{ showText }}
                      </div>
                    </div>
                    <div class="mt-10" v-if="nodeConfig.selectRange === 3">
                      <div
                        class="commonBtn-primary"
                        @click="addOrChangeUser(3)"
                      >
                        添加/修改角色
                      </div>
                      <div v-if="showText !== '请选择'" class="mt-10">
                        {{ showText }}
                      </div>
                    </div>
                  </div>
                  <div v-if="nodeConfig.settype === 9">
                    <div class="commonBtn-primary" @click="addOrChangeUser(3)">
                      添加/修改角色
                    </div>
                    <div v-if="showText !== '请选择'" class="mt-10">
                      {{ showText }}
                    </div>
                  </div>
                  <div v-if="nodeConfig.settype === 10">
                    <div class="flex-row-ycenter">
                      <div>流程上的</div>
                      <div class="ml-10 mr-10">
                        <a-select
                          v-model:value="nodeConfig.selectBill"
                          style="width: 100px"
                        >
                          <a-select-option value="createuser"
                            >填单人</a-select-option
                          >
                          <a-select-option value="applyuser"
                            >申请人</a-select-option
                          >
                        </a-select>
                      </div>
                    </div>
                  </div>
                </div>
              </a-form-item>
              <a-form-item label="多人审批时采用的审批方式：">
                <a-radio-group v-model:value="nodeConfig.examineMode">
                  <a-radio :value="1">或签(一名审批人同意或拒绝即可)</a-radio>
                  <a-radio :value="2">会签(须所有审批人同意)</a-radio>
                </a-radio-group>
              </a-form-item>
              <a-form-item
                label="当审批人在前面节点审批过或与申请人是同一人时，自动通过："
              >
                <a-switch
                  v-model:checked="nodeConfig.autoPass"
                  :checkedValue="1"
                  :unCheckedValue="0"
                ></a-switch>
              </a-form-item>
            </div>
            <div v-if="nodeConfig.type === 2">
              <a-form-item label="节点名称：">
                <a-input
                  v-model:value="nodeConfig.nodeName"
                  placeholder="请填写节点名称"
                ></a-input>
              </a-form-item>
              <a-form-item label="成员：">
                <div
                  style="
                    border: 1px solid orange;
                    padding: 10px;
                    border-radius: 4px;
                  "
                >
                  <div class="commonBtn-primary" @click="addOrChangeUser(2)">
                    添加/修改成员
                  </div>
                  <div v-if="showText !== '请选择'" class="mt-10">
                    {{ showText }}
                  </div>
                </div>
              </a-form-item>
            </div>
            <div v-if="nodeConfig.type === 4">
              <a-form-item label="条件名称：">
                <a-input
                  v-model:value="curCondition.nodeName"
                  placeholder="请填写节点名称"
                ></a-input>
              </a-form-item>
              <a-form-item label="优先级：">
                <a-select
                  @change="priorityLevelChange"
                  v-model:value="curCondition.priorityLevel"
                  style="width: 100px"
                >
                  <a-select-option
                    :value="index + 1"
                    v-for="(item, index) in nodeConfig.conditionNodes"
                    :key="index"
                  >
                    优先级{{ index + 1 }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="条件设置：">
                <a-radio-group v-model:value="curCondition.conditionModel">
                  <a-radio :value="1">配置条件</a-radio>
                  <a-radio :value="2">不满足其他分支条件时，进入该分</a-radio>
                </a-radio-group>
                <div class="mt-10">
                  <div v-if="curCondition.conditionModel === 1">
                    <div class="flex-row">
                      <div class="flex1">
                        <div class="flex-row-ycenter mb-10">
                          <div
                            class="mr-10 pointer c-primaryColor"
                            @click="addConditionGroupItem"
                          >
                            +条件
                          </div>
                          <div
                            class="pointer c-primaryColor"
                            @click="addConditionGroup"
                          >
                            +条件组
                          </div>
                        </div>
                        <div>
                          <a-collapse
                            accordion
                            v-model:activeKey="conditionGroupKey"
                            @change="conditionGroupKeyChange"
                          >
                            <a-collapse-panel
                              :key="index"
                              :header="
                                item.relation === '&' ? '满足所有' : '满足任一'
                              "
                              v-for="(
                                item, index
                              ) in curCondition.conditionList"
                            >
                              <div
                                v-for="(item2, index2) in item.Children"
                                @click.stop="curConditionGroupItem = item2"
                                class="flex-row-ycenter mb-10"
                                :class="{
                                  'active-bg':
                                    curConditionGroupItem.id == item2.id
                                }"
                              >
                                <div class="mr-10">
                                  {{
                                    item2.field.label ? item2.field.label : "??"
                                  }}
                                </div>
                                <div class="mr-10">
                                  {{
                                    item2.relation.label
                                      ? item2.relation.label
                                      : "??"
                                  }}
                                </div>
                                <div>
                                  {{
                                    item2.value.length && item2.value[0].value
                                      ? item2.value.length + "项"
                                      : "??"
                                  }}
                                </div>
                                <div
                                  class="ml-30"
                                  @click.stop="
                                    deleteCurConditionGroupItem(index2)
                                  "
                                >
                                  <component
                                    class="c-333 fs-14 pointer"
                                    is="close-outlined"
                                  ></component>
                                </div>
                              </div>
                              <template #extra>
                                <div
                                  v-if="index >= 1"
                                  @click.stop="deleteCurConditionGroup(index)"
                                >
                                  <component
                                    class="c-333 fs-14 pointer"
                                    is="close-outlined"
                                  ></component>
                                </div>
                              </template>
                            </a-collapse-panel>
                          </a-collapse>
                        </div>
                      </div>
                      <div class="flex1" style="padding: 0 0 0 20px">
                        <div
                          class="mb-10"
                          style="
                            border-bottom: 1px solid #dedede;
                            padding-bottom: 10px;
                          "
                        >
                          配置条件
                        </div>
                        <div>
                          <div
                            class="flex-row-ycenter mb-10"
                            v-if="curConditionGroup.id"
                          >
                            <div class="mr-10">组合类型：</div>
                            <div>
                              <a-radio-group
                                v-model:value="curConditionGroup.relation"
                              >
                                <a-radio value="&">满足所有</a-radio>
                                <a-radio value="|">满足任一</a-radio>
                              </a-radio-group>
                            </div>
                          </div>
                          <div
                            class="flex-row-ycenter mb-10"
                            v-if="curConditionGroupItem.id"
                          >
                            <div class="mr-10">条件选项：</div>
                            <div>
                              <a-select
                                @change="placeholderFieldChange"
                                v-model:value="
                                  curConditionGroupItem.placeholderField
                                "
                                style="width: 100px"
                              >
                                <a-select-option
                                  :value="item.model"
                                  :title="
                                    JSON.stringify({
                                      value: item.model,
                                      label: item.name
                                    })
                                  "
                                  v-for="(item, index) in formContent"
                                  :key="index"
                                >
                                  {{ item.name }}
                                </a-select-option>
                              </a-select>
                            </div>
                          </div>
                          <div
                            class="flex-row-ycenter mb-10"
                            v-if="curConditionGroupItem.id"
                          >
                            <div class="mr-10">关系：</div>
                            <div>
                              <a-select
                                @change="placeholderRelationChange"
                                v-model:value="
                                  curConditionGroupItem.placeholderRelation
                                "
                                style="width: 100px"
                              >
                                <a-select-option
                                  :value="item.value"
                                  :title="
                                    JSON.stringify({
                                      value: item.value,
                                      label: item.label
                                    })
                                  "
                                  v-for="(item, index) in relationList"
                                  :key="index"
                                >
                                  {{ item.label }}
                                </a-select-option>
                              </a-select>
                            </div>
                          </div>
                          <div class="mb-10" v-if="curConditionGroupItem.id">
                            <div class="mb-10">对象：</div>
                            <div
                              style="
                                border: 1px solid orange;
                                padding: 10px;
                                border-radius: 4px;
                              "
                            >
                              <div
                                class="commonBtn-primary"
                                @click="addOrChangeUser(1)"
                              >
                                选择
                              </div>
                              <div
                                v-if="
                                  arrToString(
                                    curConditionGroupItem.value,
                                    'label'
                                  )
                                "
                                class="mt-10"
                              >
                                {{
                                  arrToString(
                                    curConditionGroupItem.value,
                                    "label"
                                  )
                                }}
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-if="curCondition.conditionModel === 2">
                    无需配置条件
                  </div>
                </div>
              </a-form-item>
              <!--              <a-form-item-->
              <!--                  label="成员："-->
              <!--              >-->
              <!--                <div style="border: 1px solid orange;padding: 10px;border-radius: 4px;">-->
              <!--                  <div class="commonBtn-primary" @click="addOrChangeUser">添加/修改成员</div>-->
              <!--                  <div v-if="showText !== '请选择'" class="mt-10">{{ showText }}</div>-->
              <!--                </div>-->
              <!--              </a-form-item>-->
            </div>
          </a-tab-pane>
          <a-tab-pane
            :key="2"
            tab="字段权限设置"
            v-if="nodeConfig.type === 1 || nodeConfig.type === 0"
          >
            <a-table
              bordered
              size="small"
              :data-source="formContentProvideConfig.formList"
            >
              <a-table-column
                title="字段名"
                data-index="label"
                align="center"
              ></a-table-column>
              <a-table-column title="是否可见" data-index="show" align="center">
                <template #default="{record}">
                  <a-switch v-model:checked="record.show" />
                </template>
              </a-table-column>
              <a-table-column
                title="是否可编辑"
                data-index="enabled"
                align="center"
              >
                <template #default="{record}">
                  <a-switch v-model:checked="record.enabled" />
                </template>
              </a-table-column>
              <!-- <template #footer>
              </template> -->
            </a-table>
            <!-- <div style="text-align: center;">
              <a-button type="primary" @click="showModal = false" style="margin-right: 5px;">关闭</a-button>
              <a-button type="primary" @click="save">确认</a-button>
            </div> -->
          </a-tab-pane>
        </a-tabs>
      </a-form>
    </a-drawer>
    <QuickUser
      :type="quickUserType"
      v-if="showQuickUser"
      v-model:show="showQuickUser"
      :userSelectList="
        addOrChangeUserType != 1
          ? nodeConfig.nodeUserList.filter((item) => item.type === 2)
          : userSelectGroup
      "
      v-model:user-select="userSelect"
      v-model:role-select="roleSelect"
      v-model:org-select="orgSelect"
      @ok="showQuickUserCon"
    ></QuickUser>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, inject} from "vue";
import FlowAdd from "./FlowAdd.vue";
import {randomString} from "@/utils/common";
import FlowNode from "@/components/flow/FlowNode.vue";
import QuickUser from "@/components/quick/QuickUser.vue";
import useFlowStore from "@/store/flow";
import {message} from "ant-design-vue";

const props = defineProps({
  node: {
    type: Object,
    default: {}
  },
  designRemark: {
    type: Object,
    default: {}
  }
});

const formContentProvide = inject("formContentProvide");

const emits = defineEmits(["update:node", "update:formContentProvide"]);

const formContentProvideConfig = computed({
  get() {
    return formContentProvide.value;
  },
  set(value) {
    emits("update:node", value);
  }
});

const nodeConfig = computed({
  get() {
    return props.node;
  },
  set(value) {
    emits("update:node", value);
  }
});

const formContent = useFlowStore.formContent;
const relationList = ref([
  {label: "属于", value: "belong"},
  {label: "不属于", value: "notbelong"}
]);
const userSelect = ref([]);
const roleSelect = ref([]);
const orgSelect = ref([]);

const quickUserType = ref([1, 2, 3]);
const tabsKey = ref<number>(1);
const form = ref({});
const showModal = ref(false);
const handleTitle = computed(() => {
  switch (nodeConfig.value.type) {
    case 0:
      return "发起流程设置";
    case 1:
      return "审核人设置";
    case 2:
      return "抄送人设置";
    default:
      return "";
  }
});
const tabsTitle = computed(() => {
  switch (nodeConfig.value.type) {
    case 0:
      return "发起流程设置";
    case 1:
      return "审核人设置";
    case 2:
      return "抄送人设置";
    default:
      return "";
  }
});
const curCondition = ref({});
// 确认
const save = () => {
  // formContentProvideConfig.formList
};

const goHandle = (info?: any) => {
  showModal.value = true;
  curCondition.value = info;
  curConditionGroup.value = {};
  curConditionGroupItem.value = {};
};
const priorityLevelChange = () => {
  // 找到优先级发生变化的项的索引
  const changedIndex = nodeConfig.value.conditionNodes.findIndex(
    (item) => item.pkId === curCondition.value.pkId
  );
  // 从当前位置删除该项
  const removedItem = nodeConfig.value.conditionNodes.splice(
    changedIndex,
    1
  )[0];
  // 将该项插入指定位置
  nodeConfig.value.conditionNodes.splice(
    removedItem["priorityLevel"] - 1,
    0,
    removedItem
  );
  // 根据新顺序重新分配优先级级别
  nodeConfig.value.conditionNodes.forEach((item, index) => {
    item.priorityLevel = index + 1;
  });
};

const placeholderField = ref("");
const placeholderFieldChange = (value, option) => {
  curConditionGroupItem.value.field = JSON.parse(option.title);
};
const placeholderRelation = ref("");
const placeholderRelationChange = (value, option) => {
  curConditionGroupItem.value.relation = JSON.parse(option.title);
};

const curConditionGroup = ref({});
const curConditionGroupItem = ref({});
const conditionGroupKey = ref<number>();
const conditionGroupKeyChange = (key) => {
  if (key !== undefined) {
    curConditionGroup.value = curCondition.value.conditionList[key];
  } else {
    curConditionGroup.value = {};
  }
  curConditionGroupItem.value = {};
  placeholderField.value = {};
  placeholderRelation.value = {};
};
const deleteCurConditionGroupItem = (index: number) => {
  curConditionGroup.value.Children.splice(index, 1);
};

const deleteCurConditionGroup = (index: number) => {
  curCondition.value.conditionList.splice(index, 1);
};

const addConditionGroup = () => {
  // if (!this.currCondition.id) {
  //   this.currCondition = this.conditionConfig.conditionList[0]
  // }
  let group = {
    id: randomString(),
    conditionType: 2,
    relation: "&",
    Children: [
      {
        id: randomString(),
        conditionType: 1,
        field: {
          value: "",
          label: ""
        },
        relation: {
          value: "",
          label: ""
        },
        value: [
          {
            value: "",
            label: ""
          }
        ]
      }
    ]
  };
  curCondition.value.conditionList.push(group);
  let index = curCondition.value.conditionList.length - 1;
  conditionGroupKey.value = index;
  conditionGroupKeyChange(index);
};

const addConditionGroupItem = () => {
  let item = {
    id: randomString(),
    conditionType: 1,
    field: {
      value: "",
      label: ""
    },
    relation: {
      value: "",
      label: ""
    },
    value: [
      {
        value: "",
        label: ""
      }
    ]
  };
  if (!curConditionGroup.value.Children) {
    message.error("请选中条件组");
  } else {
    curConditionGroup.value.Children.push(item);
  }
};

const deleteTarget = (index?: number) => {
  if (nodeConfig.value.type === 1 || nodeConfig.value.type === 2) {
    emits("update:node", nodeConfig.value.childNode);
  }
  if (nodeConfig.value.type === 4) {
    if (nodeConfig.value.conditionNodes.length <= 2) {
      emits("update:node", nodeConfig.value.childNode);
    } else {
      nodeConfig.value.conditionNodes.splice(index, 1);
      // 根据新顺序重新分配优先级级别
      nodeConfig.value.conditionNodes.forEach((item, index) => {
        item.priorityLevel = index + 1;
      });
    }
  }
};

const init = () => {
  if (nodeConfig.value.type === 0) {
    tabsKey.value = 2;
  } else {
    tabsKey.value = 1;
  }
};
init();

const showText = computed(() => {
  if (nodeConfig.value.type === 1) {
    switch (nodeConfig.value.settype) {
      case 1:
        return nodeConfig.value.nodeUserList &&
          nodeConfig.value.nodeUserList.length
          ? arrToString(
              nodeConfig.value.nodeUserList.filter((item) => item.type === 2),
              "name"
            )
          : "请选择";
      case 2:
        return "上级主管";
      case 4:
        if (nodeConfig.value.selectRange === 1) return "全公司";
        if (nodeConfig.value.selectRange === 2) {
          return nodeConfig.value.nodeUserList &&
            nodeConfig.value.nodeUserList.length
            ? arrToString(
                nodeConfig.value.nodeUserList.filter((item) => item.type === 2),
                "name"
              )
            : "请选择";
        }
        if (nodeConfig.value.selectRange === 3) {
          return nodeConfig.value.nodeUserList &&
            nodeConfig.value.nodeUserList.length
            ? arrToString(
                nodeConfig.value.nodeUserList.filter((item) => item.type === 3),
                "name"
              )
            : "请选择";
        }
        return "请选择";
      case 9:
        return nodeConfig.value.nodeUserList &&
          nodeConfig.value.nodeUserList.length
          ? arrToString(
              nodeConfig.value.nodeUserList.filter((item) => item.type === 3),
              "name"
            )
          : "请选择";
      case 10:
        if (nodeConfig.value.selectBill === "createuser")
          return "流程上的填单人";
        if (nodeConfig.value.selectBill === "applyuser")
          return "流程上的申请人";
        return "来自流程";
    }
    return false;
  }
  if (nodeConfig.value.type === 2) {
    return nodeConfig.value.nodeUserList && nodeConfig.value.nodeUserList.length
      ? arrToString(
          nodeConfig.value.nodeUserList.filter((item) => item.type === 2),
          "name"
        )
      : "请选择";
  }
});

const showTextCondition = computed(() => (item: any) => {
  if (item.type === 3) {
    if (item.conditionModel === 1) {
      return item.conditionList.length ? "已配置条件" : "请配置条件";
    } else {
      return "不满足其他分支条件时，进入该分支";
    }
  }
});
const arrToString = (arr: object[], key: string) => {
  if (arr.length) return arr.map((item) => item[key]).join(",");
  return "请选择";
};

const addCondition = () => {
  const len = nodeConfig.value.conditionNodes.length + 1;
  nodeConfig.value.conditionNodes.push({
    pkId: randomString(),
    nodeName: "条件" + len,
    type: 3,
    priorityLevel: len,
    conditionList: [],
    conditionModel: 1,
    nodeUserList: [],
    childNode: {}
  });
  emits("update:node", nodeConfig.value);
};

const showQuickUser = ref(false);
const addOrChangeUserType = ref<number>();
const userSelectGroup: any = ref([]);
const addOrChangeUser = (type?: number) => {
  addOrChangeUserType.value = type;
  if (type === 1) {
    //选择用户
    quickUserType.value = [2];
    userSelect.value = curConditionGroupItem.value["value"].map((item) => {
      return item.value;
    });
    userSelectGroup.value = [];
    curConditionGroupItem.value["value"].forEach((item) => {
      if (item.label && item.value) {
        userSelectGroup.value.push({
          name: item.label,
          targetId: item.value
        });
      }
    });
    showQuickUser.value = true;
    return false;
  }
  if (type === 2) {
    //审核人设置->指定方式->指定成员
    //审核人设置->指定方式->发起人自选->指定成员
    //抄送人设置->成员
    quickUserType.value = [2];
    userSelect.value = nodeConfig.value["nodeUserList"].map((item) => {
      return item.type === 2 && item.targetId;
    });
    showQuickUser.value = true;
    return false;
  }
  if (type === 3) {
    //审核人设置->指定方式->发起人自选->指定角色
    quickUserType.value = [3];
    userSelect.value = nodeConfig.value["nodeUserList"].map((item) => {
      return item.type === 3 && item.targetId;
    });
    showQuickUser.value = true;
    return false;
  }
};
const showQuickUserCon = (e) => {
  let {user, org, role} = e;
  if (addOrChangeUserType.value === 1) {
    let userNew = user.map((item) => {
      return {
        value: item.id || item.targetId,
        label: item.name
      };
    });
    curConditionGroupItem.value["value"] = userNew;
    return false;
  }

  if (addOrChangeUserType.value === 2) {
    let userNew = user.map((item) => {
      return {
        type: 2,
        targetId: item.id,
        name: item.name
      };
    });
    nodeConfig.value.nodeUserList = userNew;
    return false;
  }
  if (addOrChangeUserType.value === 3) {
    let roleNew = role.map((item) => {
      return {
        type: 3,
        targetId: item.id,
        name: item.name
      };
    });
    nodeConfig.value.nodeUserList = roleNew;
    return false;
  }
};
</script>

<style lang="less" scoped>
.FlowCard-container {
  position: relative;
  z-index: 20;
  display: flex;
  justify-content: center;
  width: fit-content;
}

.active-bg {
  background-color: orange;
}

.card {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 10px 0 #dedede;
  width: 240px;

  .title {
    padding: 6px 10px;
    position: relative;

    .close {
      position: absolute;
      right: 4px;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .content {
    height: 60px;
    padding: 0 10px;
    background-color: #ffffff;

    .content-main {
      flex: 1;
    }
  }
}

.condition {
  position: relative;
  border-top: 2px solid #dedede;
  border-bottom: 2px solid #dedede;
  flex-wrap: nowrap;
  display: flex;
  justify-content: center;

  &:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background-color: #f1f1f1;
    margin: auto;
    z-index: 10;
  }

  .btn-addCondition {
    position: absolute;
    top: -15px;
    z-index: 30;
  }

  .condition-item {
    position: relative;

    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 2px;
      background-color: #dedede;
      margin: auto;
      z-index: 10;
    }

    .top-left-cover-line {
      position: absolute;
      height: 8px;
      width: 50%;
      background-color: #f1f1f1;
      top: -4px;
      left: -1px;
    }

    .bottom-left-cover-line {
      position: absolute;
      height: 8px;
      width: 50%;
      background-color: #f1f1f1;
      bottom: -4px;
      left: -1px;
    }

    .top-right-cover-line {
      position: absolute;
      height: 8px;
      width: 50%;
      background-color: #f1f1f1;
      top: -4px;
      right: -1px;
    }

    .bottom-right-cover-line {
      position: absolute;
      height: 8px;
      width: 50%;
      background-color: #f1f1f1;
      bottom: -4px;
      right: -1px;
    }

    .condition-card {
      padding: 30px 50px 0;
      position: relative;
      z-index: 20;

      .card {
        margin-left: auto;
        margin-right: auto;
      }

      //&:before {
      //  content: '';
      //  display: block;
      //  position: absolute;
      //  top: 0;
      //  right: 0;
      //  bottom: 0;
      //  left: 0;
      //  width: 2px;
      //  background-color: #dedede;
      //  margin: auto;
      //  z-index: 10;
      //}
    }
  }
}
</style>
